<script setup lang="tsx">
import { ref, reactive } from 'vue'
import { ElCheckbox } from 'element-plus'
const isVerified = ref(false)

const table = reactive({
  loading: false,
  records: [
    {
      number: '98957',
      time: '2020-10-26',
      level: '高危',
      name: 'Siemens SIMATIC S7-400 CPU (Update A) (CVE-2018-4850)'
    },
    {
      number: '98879',
      time: '2020-10-26',
      level: '中危',
      name: 'Siemens SIMATIC S7-1500, SIMATIC S7-1500 Software Controller and SIMATIC ET 200SP OpenController (Update A) Improper Input Validation (CVE-2018-13805)'
    },
    {
      number: '98878',
      time: '2020-10-26',
      level: '高危',
      name: 'Siemens SIMATIC S7-1200 CPU Family Version 4 Cross-Site Request Forgery (CSRF) (CVE-2018-13800)'
    },
    {
      number: '98957',
      time: '2020-10-26',
      level: '高危',
      name: 'Siemens SIMATIC S7 (Update A) Resource Exhaustion (CVE-2018-13815)'
    },
    {
      number: '98957',
      time: '2020-10-26',
      level: '高危',
      name: ' Siemens S7-400 CPUs (Update A) Improper Input Validation (CVE-2018-16557 CVE-2018-16556)'
    }
  ]
})

const ruleTable = reactive({
  selections: [],
  columns: [
    { label: '序号', width: 100, type: 'index' },
    { label: '漏洞编号', prop: 'number' },
    { label: '发现日期', prop: 'time' },
    {
      label: '漏洞等级',
      prop: 'level',
      render: ({ row }) => (
        <span class={row.level === '中危' ? 'warning' : 'danger'}>{row.level}</span>
      )
    },
    { label: '漏洞名称', prop: 'name' },
    {
      label: '操作',
      width: 200,
      render: ({ row }) => (
        <div>
          <span
            class="click"
            onClick={() => {
              openDetail(row)
            }}
          >
            详情
          </span>
        </div>
      )
    }
  ]
})

const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 1
})

// 是否验证
const changeVerify = () => {}

// 详情
const openDetail = (row) => {
  console.log(row)
}
</script>
<template>
  <div class="verify">
    <el-checkbox v-model="isVerified" label="是否验证" @change="changeVerify" />
  </div>
  <!-- 漏洞列表 -->
  <jmp-table
    :data="table.records"
    :columns="ruleTable.columns"
    :loading="table.loading"
    @selection-change="ruleTable.selections = $event"
  />
  <!-- 分页 -->
  <jmp-pagination
    v-model:page="page.pageNum"
    v-model:limit="page.pageSize"
    v-model:total="page.total"
  />
</template>
<style scoped lang="scss">
.verify {
  display: flex;
  justify-content: right;
}
.danger {
  color: var(--el-color-danger);
}
.warning {
  color: var(--el-color-warning);
}
</style>
